﻿@inherits StyleComponentBase

<style data-name="Dashbaord">

    /* dashboard */

    .dashboard-root {
        padding: 32px;
    }

    /* budget */

    .dashboard-budget-root {
        height: 100%;
    }

    .dashboard-budget-content {
        display: flex;
        align-items: center;
    }

    .dashboard-budget-title {
        font-weight: 700;
    }

    .dashboard-budget-avatar {
        width: 56px;
        height: 56px;
        background-color: #e53935;
    }

    .dashboard-budget-icon {
        width: 32px;
        height: 32px;
    }

    .dashboard-budget-difference {
        display: flex;
        margin-top: 16px;
        align-items: center;
    }

    .dashboard-budget-difference-icon {
        color: #b71c1c;
    }

    .dashboard-budget-difference-value {
        color: #b71c1c;
        margin-right: 8px;
    }

    /* totalusers */

    .dashboard-totalusers-root {
        height: 100%;
    }

    .dashboard-totalusers-content {
        display: flex;
        align-items: center;
    }

    .dashboard-totalusers-title {
        font-weight: 700;
    }

    .dashboard-totalusers-avatar {
        width: 56px;
        height: 56px;
        background-color: #43a047;
    }

    .dashboard-totalusers-icon {
        width: 32px;
        height: 32px;
    }

    .dashboard-totalusers-difference {
        display: flex;
        margin-top: 16px;
        align-items: center;
    }

    .dashboard-totalusers-difference-icon {
        color: #1b5e20;
    }

    .dashboard-totalusers-difference-value {
        color: #1b5e20;
        margin-right: 8px;
    }

    /* tasks */

    .dashboard-tasks-root {
        height: 100%;
    }

    .dashboard-tasks-content {
        display: flex;
        align-items: center;
    }

    .dashboard-tasks-title {
        font-weight: 700;
    }

    .dashboard-tasks-avatar {
        color: #ffffff;
        width: 56px;
        height: 56px;
        background-color: #3f51b5;
    }

    .dashboard-tasks-icon {
        width: 32px;
        height: 32px;
    }

    .dashboard-tasks-progress {
        margin-top: 24px;
    }

    /* totalprofit */

    .dashboard-totalprofit-root {
        color: #ffffff;
        height: 100%;
        background-color: #3f51b5;
    }

    .dashboard-totalprofit-content {
        display: flex;
        align-items: center;
    }

    .dashboard-totalprofit-title {
        font-weight: 700;
    }

    .dashboard-totalprofit-avatar {
        color: #3f51b5;
        width: 56px;
        height: 56px;
        background-color: #ffffff;
    }

    .dashboard-totalprofit-icon {
        width: 32px;
        height: 32px;
    }

    /* products */

    .dashboard-products-root {
        height: 100%;
    }

    .dashboard-products-content {
        padding: 0;
    }

    .dashboard-products-image {
        width: 48px;
        height: 48px;
    }

    .dashboard-products-actions {
        justify-content: flex-end;
    }

    /* orders */

    .dashboard-orders-content {
        padding: 0;
    }

    .dashboard-orders-inner {
        min-width: 800px;
    }

    .dashboard-orders-status-container {
        display: flex;
        align-items: center;
    }

    .dashboard-orders-status {
        margin-right: 8px;
    }

    .dashboard-orders-actions {
        justify-content: flex-end;
    }

    /* userdevices */

    .dashboard-userdivces-root {
        height: 100%;
    }

    .dashboard-userdivces-chart-container {
        height: 300px;
        position: relative;
    }

    .dashboard-userdivces-chart-container .row {
        height: 300px;
        position: relative;
    }

    .dashboard-userdivces-stats {
        display: flex;
        margin-top: 16px;
        justify-content: center;
    }

    .dashboard-userdivces-device {
        padding: 8px;
        text-align: center;
    }

    .dashboard-userdivces-device-icon {
        color: #546e7a;
    }

    /* sales */

    .dashboard-sales-chart-container {
        height: 400px;
        position: relative;
    }

    .dashboard-sales-chart-container .row {
        height: 400px;
        position: relative;
    }

    .dashboard-sales-chart-actions {
        justify-content: flex-end;
    }

</style>
